<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-descriptions title="车辆维护记录" />
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="维护车辆">
                        <el-select v-model="formInline.license" placeholder="请选择" clearable>
                            <el-option :label="item" :value="item" v-for="item in filterData" :key="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="维护项目">
                        <el-select v-model="formInline.maintain" placeholder="请选择" clearable>
                            <el-option :label="item.category" :value="item.category" v-for="item in categorylist"
                                :key="item.objectId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
            <el-table-column type="index" :index="indexMethod" />
            <el-table-column prop="license" label="车牌号" />
            <el-table-column prop="maintain" label="维护项" />
            <el-table-column prop="createdAt" label="维护时间">
                <template #default="scope">
                    {{ scope.row.createdAt.slice(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="350">
                <template #default="scope">
                    <div class="text-cont">
                        维修内容: {{ scope.row.maintain }} ,维修时间: {{ scope.row.createdAt.slice(0, 10) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无维修记录" />
            </template>
        </el-table>

        <div class="pagination" v-if="tableData.length">
            <el-pagination :page-sizes="[8, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="8" />
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { CateGet, MainGet } from '../../api/car';
import { MainType } from '../../types/car';
import { cloneDeep } from 'lodash';
import { MainDel } from '../../api/car'
import { ElMessage, ElMessageBox } from 'element-plus'
const indexMethod = (index: number) => {
    return index + 1
}
// 数据包
const tableData = ref<MainType[]>([])
const total = ref<number>(0)

// 获取数据
let Main = await MainGet()
tableData.value = Main.data.results
total.value = Main.data.count

// 车辆查询
// 数据去重
const filterData = computed(() => {
    let arr = [] as string[]
    tableData.value.map(item => {
        if (!arr.includes(item.license)) {
            arr.push(item.license)
        }
    })
    return arr
})


// 查询数据
const formInline = reactive({
    maintain: '',
    license: '',
})
// 查询
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await MainGet(1, 8, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

// 维修分类数据
const categorylist = ref<{ category: string, objectId: string }[]>([])
let cate = await CateGet()
categorylist.value = cate.data.results

// 分页
const Pagesize = ref<number>(8)
// 一页显示多少条
const handleSizeChange = async (val: number) => {
    let obj = cloneDeep(formInline)
    let res = await MainGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val

}
// 点击分页
const handleCurrentChange = async (val: number) => {
    let obj = cloneDeep(formInline)
    let res = await MainGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

// 删除
const handleDelete = (i: number, data: MainType) => {
    // console.log(i, data);
    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })
            console.log(data.objectId);

            MainDel(data.objectId!).then(async () => {
                let Main = await MainGet()
                tableData.value = Main.data.results
                total.value = Main.data.count
                tableData.value.splice(i, 1)
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })
}

</script>

<style lang="scss">
.el-descriptions__title {
    color: #666;
    padding-left: 15px;
    border-left: 4px solid #00aeff;

}

.pagination {
    margin-top: 15px;
}

.text-cont {
    text-align: right;
}
</style>